<template>
	<div class="xygrid">
		<!-- 标题 -->

		<el-form :model="$store.state.$currentproperties" ref="vForm" :rules="rules" class="lef" label-position="left"
			label-width="80px" size="small">
			<!--      基本属性-->
			<!-- <div class="static-content-item"> -->
			<el-collapse v-model="activeNames">
				<el-collapse-item title="基本属性" name="1">
					<!-- <el-divider direction="horizontal">基本属性</el-divider> -->
					<!-- </div> -->
					<el-form-item label="宫格列数" prop="columnNum">
						<el-input-number v-model="$store.state.$currentproperties.gridProps.columnNum"
							style="width:100%" :min="1" :max="100000000000" :precision="0" :step="1"></el-input-number>
					</el-form-item>
					<el-form-item label="图标大小" prop="iconSize">
						<el-input-number v-model="$store.state.$currentproperties.gridProps.iconSize" style="width:100%"
							:min="1" :max="100000000000" :precision="0" :step="1"></el-input-number>
					</el-form-item>
					<el-form-item label="宫格间隔" prop="gutter">
						<el-input-number v-model="$store.state.$currentproperties.gridProps.gutter" style="width:100%"
							:min="0" :max="100000000000" :precision="0" :step="1"></el-input-number>
					</el-form-item>
					<el-form-item label="边框显示" prop="border">
						<el-switch v-model="$store.state.$currentproperties.gridProps.border"></el-switch>
					</el-form-item>
					<!--      宫格设置-->
				</el-collapse-item>
				<el-collapse-item title="宫格设置(可拖拽)" name="2">
					<!-- 				<div class="static-content-item">
					<el-divider direction="horizontal">宫格设置(可拖拽)</el-divider>
				</div> -->
					<!--      <el-form-item prop="switch19901">-->
					<!--      </el-form-item>-->


					<draggable v-model="$store.state.$currentproperties.gridItemProps"
						style="background: #f7f8fa; padding:5px" animation="300" ghostClass="ghostClass">
						<transition-group>
							<div v-for="(item, idx) in $store.state.$currentproperties.gridItemProps"
								:key="item.text + idx" style="margin-bottom: 10px">
								<van-cell-group inset>
									<van-cell is-link>
										<template #title>
											<div style="font-weight: bold">
												<i :class="item.icon"></i>
												<van-icon :name="item.icon"></van-icon>
												<span style="margin-left: 10px">{{ item.text }}</span>
											</div>
										</template>
										<template #default>
											<el-button type="text" size="mini" :key="'editButton-' + idx"
												@click="editGrid(idx)">编辑</el-button>
											<el-button type="text" size="mini" :key="'delButton-' + idx"
												@click="deleteConfirm(idx)">删除
											</el-button>

										</template>
									</van-cell>
									<van-cell title="跳转类型" :value="getLabel(item.linkType)" />
									<van-cell title="跳转页面" :value="item.url" />

								</van-cell-group>
							</div>
						</transition-group>

					</draggable>

					<div style="margin: 10px">
						<el-button size="large" style="width: 100%" type="primary" icon="plus"
							@click="addGrid">添加宫格</el-button>
					</div>

					<!--    宫格 dialog-->
					<el-dialog :visible.sync="isShow" @close="onClose" title="添加/修改宫格">
						<el-form ref="gridItemForm" :model="gridItem" :rules="gridRules" size="small"
							label-width="110px">
							<el-form-item label="名称" prop="text">
								<el-input v-model="gridItem.text" placeholder="请输入名称" clearable
									:style="{width: '100%'}">
								</el-input>
							</el-form-item>
							<el-form-item label="使用外部图标" prop="useSlot" required>
								<el-switch v-model="gridItem.useSlot"></el-switch>
							</el-form-item>
							<el-form-item label="内部图标" prop="icon">
								<el-input v-model="gridItem.icon" placeholder="请输入内部图标" clearable
									:style="{width: '100%'}">
								</el-input>
							</el-form-item>


							<!-- 文字颜色 -->
							<el-form-item label="图标颜色" prop="iconColor">
								<!-- 颜色选择器 -->
								<el-color-picker v-model="gridItem.iconColor" show-alpha :predefine="predefineColors">
								</el-color-picker>
							</el-form-item>

							<el-form-item label="外部图标" prop="slotImageSrc">
								<el-input v-model="gridItem.slotImageSrc" placeholder="素材库选择" clearable
									:style="{width: '100%'}">
								</el-input>
							</el-form-item>
							<el-form-item label="跳转类型" prop="linkType">
								<el-radio-group v-model="gridItem.linkType" size="medium">
									<el-radio v-for="(item, index) in linkTypeOptions" :key="index" :label="item.value"
										:disabled="item.disabled">{{ item.label }}
									</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="跳转页面" prop="url">
								<el-input v-model="gridItem.url" placeholder="请输入跳转页面" clearable
									:style="{width: '100%'}">
								</el-input>
							</el-form-item>
						</el-form>
						<div slot="footer">
							<el-button @click="onClose">取消</el-button>
							<el-button type="primary" @click="handleConfirm">确定</el-button>
						</div>
					</el-dialog>
					<!--删除gird dialog-->
					<el-dialog title="提示" :visible.sync="deleteGridDialogVisible">
						<span>是否要删除宫格：{{ currentGridName }}</span>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
						</span>
					</el-dialog>

				</el-collapse-item>
				<el-collapse-item title="高级设置" name="3">

					<!--      高级设置-->
					<!-- 		<div class="static-content-item">
					<el-divider direction="horizontal">高级设置</el-divider>
				</div> -->
					<el-form-item label="节点样式" prop="input27001">
						<el-input v-model="$store.state.$currentproperties.Advanced.customClass" type="text"
							clearable></el-input>
					</el-form-item>
					<el-form-item label="内容样式" prop="input77425">
						<el-input v-model="$store.state.$currentproperties.Advanced.contentClass" type="text"
							clearable></el-input>
					</el-form-item>
					<el-form-item label="图标样式" prop="input23029">
						<el-input v-model="$store.state.$currentproperties.Advanced.iconClass" type="text"
							clearable></el-input>
					</el-form-item>
					<el-form-item label="文本样式" prop="input25029">
						<el-input v-model="$store.state.$currentproperties.Advanced.textClass" type="text"
							clearable></el-input>
					</el-form-item>
				</el-collapse-item>
			</el-collapse>
		</el-form>

	</div>
</template>

<script>
	import draggable from 'vuedraggable'

	import utils from '@/utils/index'

	export default {
		name: 'xyGridStyle',
		components: {
			draggable
		},
		props: {
			// $store.state.$currentproperties: Object,
		},
		data() {
			return {
				activeNames: ['1', '2', '3'],
				deleteGridDialogVisible: false,
				currentGridName: undefined,
				rules: {
					//校验表单输入
					noticeText: [
						//页面名称
						{
							required: true,
							message: '请输入公告',
							trigger: 'blur'
						},
					],
				},
				gridRules: {
					text: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					icon: [],
					slotImageSrc: [],
					linkType: [{
						required: true,
						message: '跳转类型不能为空',
						trigger: 'change'
					}],
					url: [{
						required: true,
						message: '请输入跳转页面',
						trigger: 'blur'
					}],
				},
				linkTypeOptions: [{
					"label": "普通页面跳转",
					"value": "navigateTo"
				}, {
					"label": "底部标签页跳转",
					"value": "switchTab"
				}],
				isShow: false,
				isDialogLoading: false,
				predefineColors: [
					// 颜色选择器预设
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'#409EFF',
					'#909399',
					'#C0C4CC',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				],
				gridItemDefault: {
					text: '宫格',
					icon: 'apps-o',
					url: '',
					iconColor: '',
					linkType: 'navigateTo',
					useSlot: false,
					slotImageSrc: 'https://img.yzcdn.cn/vant/apple-1.jpg'
				},
				gridItem: {},
				currentIndex: -1

			}
		},
		onLoad() {

		},
		methods: {
			addGrid() {
				this.isDialogLoading = true;
				this.isShow = true;
				// 通过currentIndex判断新增或修改
				this.currentIndex = -1;
				this.gridItem = this.gridItemDefault;
				this.isDialogLoading = false;
			},
			editGrid(index) {
				this.isDialogLoading = true;
				this.isShow = true;
				// 通过currentIndex判断新增或修改
				this.currentIndex = index;
				this.gridItem = this.$store.state.$currentproperties.gridItemProps[this.currentIndex];
				this.isDialogLoading = false;
			},
			deleteConfirm(index) {
				this.currentIndex = index;
				this.currentGridName = this.$store.state.$currentproperties.gridItemProps[index].text
				this.$confirm('是否删除宫格' + this.currentGridName + ', 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$store.state.$currentproperties.gridItemProps.splice(this.currentIndex, 1);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			handleConfirm() {
				if (this.currentIndex < 0) {
					let tmp = JSON.parse(JSON.stringify(this.gridItem))
					this.$store.state.$currentproperties.gridItemProps.push(tmp);
				}
				this.currentIndex = -1;
				this.gridItem = this.gridItemDefault;
				this.isShow = false;
				// this.currentItem = this.gridItem
			},
			onClose() {
				this.gridItem = this.gridItemDefault;
				this.currentIndex = -1;
				this.isShow = false;
			},
			getLabel(key) {
				return utils.getOptionLabel(this.linkTypeOptions, key);
			}
		}
	}
</script>

<style scoped lang="scss">
	.xygrid {

		.lef {
			::v-deep  .el-form-item__label {
				text-align: left;
			}
		}

		/* 颜色选择器 */

		.picke {
			float: right;
		}

		.ghostClass {
			background-color: blue !important;

		}
	}
</style>